AspNetCore.Docs/razor

By Rick Anderson

:::moniker range=">= aspnetcore-7.0"

This is the first tutorial of a series that teaches the basics of building an ASP.NET Core Razor Pages web app.

For a more advanced introduction aimed at developers who are familiar with controllers and views, see Introduction to Razor Pages. For a video introduction, see Entity Framework Core for Beginners.

[!INCLUDE Choose web UI]

At the end of this tutorial, you'll have a Razor Pages web app that manages a database of movies.

[!INCLUDE]

[!INCLUDE]

[!INCLUDE]

Start Visual Studio and select Create a new project.

In the Create a new project dialog, select ASP.NET Core Web App > Next.

In the Configure your new project dialog, enter RazorPagesMovie for Project name. It's important to name the project RazorPagesMovie, including matching the capitalization, so the namespaces will match when you copy and paste example code.

Select Next.

In the Additional information dialog:

Select Create.

The following starter project is created:

For alternative approaches to create the project, see Create a new project in Visual Studio.

Open the integrated terminal.

Change to the directory (cd) that will contain the project.

Run the following commands:

Visual Studio Code displays a dialog box that asks Do you trust the authors of the files in this folder. Select:

The dotnet new command creates a new Razor Pages project in the RazorPagesMovie folder.

The code command opens the RazorPagesMovie folder in the current instance of Visual Studio Code.

In Visual Studio for Mac 2022, select File > New Project....

In the Choose a template for your new project dialog:

In the Configure your new Web Application dialog:

In the Configure your new Web Application dialog:

Select RazorPagesMovie in Solution Explorer, and then press Ctrl+F5 to run without the debugger.

Visual Studio displays the following dialog when a project is not yet configured to use SSL:

Select Yes if you trust the IIS Express SSL certificate.

The following dialog is displayed:

Select Yes if you agree to trust the development certificate.

[!INCLUDEtrust FF]

Visual Studio:

[!INCLUDE]

In Visual Studio Code, press Ctrl+F5 to run the app. At the Select environment prompt, select .NET Core.

The default browser launched with the following URL: https://localhost: where is the randomly generated port number.

Select Debug > Start Debugging to launch the app.

Visual Studio for Mac launches a browser and navigates to https://localhost:, where is the port number randomly assigned at project creation and is set in Properties/launchSettings.json.

The following sections contain an overview of the main project folders and files that you'll work with in later tutorials.

Contains Razor pages and supporting files. Each Razor page is a pair of files:

Supporting files have names that begin with an underscore. For example, the _Layout.cshtml file configures UI elements common to all pages. _Layout.cshtml sets up the navigation menu at the top of the page and the copyright notice at the bottom of the page. For more information, see xref:mvc/views/layout.

Contains static assets, like HTML files, JavaScript files, and CSS files. For more information, see xref:fundamentals/static-files.

Contains configuration data, like connection strings. For more information, see xref:fundamentals/configuration/index.

Contains the following code:

[!code-csharp]

The following lines of code in this file create a WebApplicationBuilder with preconfigured defaults, add Razor Pages support to the Dependency Injection (DI) container, and builds the app:

[!code-csharp]

The developer exception page is enabled by default and provides helpful information on exceptions. Production apps should not be run in development mode because the developer exception page can leak sensitive information.

The following code sets the exception endpoint to /Error and enables HTTP Strict Transport Security Protocol (HSTS) when the app is not running in development mode:

[!code-csharp]

For example, the preceding code runs when the app is in production or test mode. For more information, see Use multiple environments in ASP.NET Core.

The following code enables various Middleware:

If you run into a problem you can't resolve, compare your code to the completed project. View or download completed project (how to download).

[!div class="step-by-step"] Next: Add a model

:::moniker-end

:::moniker range="= aspnetcore-6.0" This is the first tutorial of a series that teaches the basics of building an ASP.NET Core Razor Pages web app.

For a more advanced introduction aimed at developers who are familiar with controllers and views, see Introduction to Razor Pages. For a video introduction, see Entity Framework Core for Beginners.

[!INCLUDE Choose web UI]

At the end of the series, you'll have an app that manages a database of movies.

In this tutorial, you:

[!div class="checklist"]

At the end of this tutorial, you'll have a working Razor Pages web app that you'll enhance in later tutorials.

[!INCLUDE]

[!INCLUDE]

[!INCLUDE]

Start Visual Studio 2022 and select Create a new project.

In the Create a new project dialog, select ASP.NET Core Web App, and then select Next.

In the Configure your new project dialog, enter RazorPagesMovie for Project name. It's important to name the project RazorPagesMovie, including matching the capitalization, so the namespaces will match when you copy and paste example code.

Select Next.

In the Additional information dialog, select .NET 6.0 (Long-term support) and then select Create.

The following starter project is created:

Open the integrated terminal.

Change to the directory (cd) that will contain the project.

Run the following commands:

Visual Studio Code displays a dialog box that asks Do you trust the authors of the files in this folder. Select:

The dotnet new command creates a new Razor Pages project in the RazorPagesMovie folder.

The code command opens the RazorPagesMovie folder in the current instance of Visual Studio Code.

Select File > New Solution.

In Visual Studio 2022 for Mac select Web and Console > App > Web Application > Next.

In the Configure your new Web Application dialog:

Name the project RazorPagesMovie and select Create.

Select RazorPagesMovie in Solution Explorer, and then press Ctrl+F5 to run without the debugger.

Visual Studio displays the following dialog when a project is not yet configured to use SSL:

Select Yes if you trust the IIS Express SSL certificate.

The following dialog is displayed:

Select Yes if you agree to trust the development certificate.

[!INCLUDEtrust FF]

Visual Studio:

[!INCLUDE]

In Visual Studio Code, press Ctrl+F5 to run the app. At the Select environment prompt, select .NET Core.

The default browser launched with the following URL: https://localhost:5001

Select Debug > Start Debugging to launch the app. Visual Studio for Mac launches a browser and navigates to https://localhost:, where is the port number randomly assigned at project creation and is set in Properties/launchSettings.json.

The following sections contain an overview of the main project folders and files that you'll work with in later tutorials.

Contains Razor pages and supporting files. Each Razor page is a pair of files:

Supporting files have names that begin with an underscore. For example, the _Layout.cshtml file configures UI elements common to all pages. This file sets up the navigation menu at the top of the page and the copyright notice at the bottom of the page. For more information, see xref:mvc/views/layout.

Contains static assets, like HTML files, JavaScript files, and CSS files. For more information, see xref:fundamentals/static-files.

Contains configuration data, like connection strings. For more information, see xref:fundamentals/configuration/index.

Contains the following code:

[!code-csharp]

The following lines of code in this file create a WebApplicationBuilder with preconfigured defaults, add Razor Pages support to the Dependency Injection (DI) container, and build the app:

[!code-csharp]

The developer exception page is enabled by default and provides helpful information on exceptions. Production apps should not be run in development mode because the developer exception page can leak sensitive information.

The following code sets the exception endpoint to /Error and enables HTTP Strict Transport Security Protocol (HSTS) when the app is not running in development mode:

[!code-csharp]

For example, the preceding code runs when the app is in production or test mode. For more information, see Use multiple environments in ASP.NET Core.

The following code enables various Middleware:

If you run into a problem you can't resolve, compare your code to the completed project. View or download completed project (how to download).

[!div class="step-by-step"] Next: Add a model

:::moniker-end

:::moniker range=">= aspnetcore-5.0 < aspnetcore-6.0" This is the first tutorial of a series that teaches the basics of building an ASP.NET Core Razor Pages web app.

For a more advanced introduction aimed at developers who are familiar with controllers and views, see Introduction to Razor Pages.

[!INCLUDE Choose web UI]

At the end of the series, you'll have an app that manages a database of movies.

In this tutorial, you:

[!div class="checklist"]

At the end of this tutorial, you'll have a working Razor Pages web app that you'll enhance in later tutorials.

[!INCLUDE]

[!INCLUDE]

[!INCLUDE]

Start Visual Studio and select Create a new project. For more information, see Create a new project in Visual Studio.

In the Create a new project dialog, select ASP.NET Core Web Application, and then select Next.

In the Configure your new project dialog, enter RazorPagesMovie for Project name. It's important to name the project RazorPagesMovie, including matching the capitalization, so the namespaces will match when you copy and paste example code.

Select Create.

In the Create a new ASP.NET Core web application dialog, select:

The following starter project is created:

Open the integrated terminal.

Change to the directory (cd) which will contain the project.

Run the following commands:

In the Configure the new Web Application dialog:

Name the project RazorPagesMovie and select Create.

[!INCLUDE]

Here's an overview of the main project folders and files that you'll work with in later tutorials.

Contains Razor pages and supporting files. Each Razor page is a pair of files:

Supporting files have names that begin with an underscore. For example, the _Layout.cshtml file configures UI elements common to all pages. This file sets up the navigation menu at the top of the page and the copyright notice at the bottom of the page. For more information, see xref:mvc/views/layout.

Contains static assets, like HTML files, JavaScript files, and CSS files. For more information, see xref:fundamentals/static-files.

Contains configuration data, like connection strings. For more information, see xref:fundamentals/configuration/index.

Contains the entry point for the app. For more information, see xref:fundamentals/host/generic-host.

Contains code that configures app behavior. For more information, see xref:fundamentals/startup.

If you run into a problem you can't resolve, compare your code to the completed project. View or download completed project (how to download).

[!div class="step-by-step"] Next: Add a model

:::moniker-end

:::moniker range="< aspnetcore-5.0"

This is the first tutorial of a series that teaches the basics of building an ASP.NET Core Razor Pages web app.

For a more advanced introduction aimed at developers who are familiar with controllers and views, see Introduction to Razor Pages.

At the end of the series, you'll have an app that manages a database of movies.

View or download sample code (how to download).

In this tutorial, you:

[!div class="checklist"]

At the end of this tutorial, you'll have a working Razor Pages web app that you'll build on in later tutorials.

[!INCLUDE]

[!INCLUDE]

[!INCLUDE]

From the Visual Studio File menu, select New > Project.

Create a new ASP.NET Core Web Application and select Next.

Name the project RazorPagesMovie. It's important to name the project RazorPagesMovie so the namespaces will match when you copy and paste code.

Select ASP.NET Core 3.1 in the dropdown, Web Application, and then select Create.

The following starter project is created:

Open the integrated terminal.

Change to the directory (cd) which will contain the project.

Run the following commands:

After the status bar's OmniSharp flame icon turns green, a dialog asks Required assets to build and debug are missing from 'RazorPagesMovie'. Add them? Select Yes.

A .vscode directory, containing launch.json and tasks.json files, is added to the project's root directory.

If Visual Studio Code doesn't offer to add the assets automatically, see the Linux operating system guidance in xref:blazor/tooling?pivot=linux.

Select File > New Solution.

In Visual Studio for Mac earlier than version 8.6, select .NET Core > App > Web Application > Next. In version 8.6 or later, select Web and Console > App > Web Application > Next.

In the Configure the new Web Application dialog:

Select Next.

Name the project RazorPagesMovie, and then select Create.

[!INCLUDE]

Here's an overview of the main project folders and files that you'll work with in later tutorials.

Contains Razor pages and supporting files. Each Razor page is a pair of files:

Supporting files have names that begin with an underscore. For example, the _Layout.cshtml file configures UI elements common to all pages. This file sets up the navigation menu at the top of the page and the copyright notice at the bottom of the page. For more information, see xref:mvc/views/layout.

Contains static files, like HTML files, JavaScript files, and CSS files. For more information, see xref:fundamentals/static-files.

Contains configuration data, like connection strings. For more information, see xref:fundamentals/configuration/index.

Contains the entry point for the program. For more information, see xref:fundamentals/host/generic-host.

Contains code that configures app behavior. For more information, see xref:fundamentals/startup.

[!div class="step-by-step"] Next: Add a model

:::moniker-end